<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<title>Plupload</title>
    <link href="demo.css" rel="stylesheet">
    <script src="jquery.js"></script>

    <script src="dist/Plupload.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Plupload</h2>
    <ul>
        <li>使用方法请看源代码及注释</li>
    </ul>

    <div style="height: 50px"></div>
    <h2>Demo</h2>
    <p style="padding: 10px 0; line-height: 25px; font-size: 12px;">
        原版官网： <a href="http://www.plupload.com/" target="_blank">http://www.plupload.com/</a><br>
        在与官方API <b>完全兼容</b> 的基础上增加了三个配置属性:<br>
        <b>autoUpload</b> —— 选择文件后自动上传 默认为false<br>
        <b>multipart_params</b> —— 可传 object json 或者 返回 json 的 function(){} 若为 function 每次上传都会运行以拿到最新数据(常用于表单)<br>
        <b>Error</b> —— 发生错误都会 console.log 错误信息<br>
        <br>
        如果设定 <b>autoUpload</b> 为 <b>false</b> 的话<br>
        可以通过 <b>uploader.start()</b> 启动上传<br>
        <br>
        初次使用时注意 确认 <b>Plupload.min.js</b> 里面的 <b>flash_swf_url</b> 和 <b>silverlight_xap_url</b> 配置 url 正确<span style="color: #f00;">（由于插件代码已经压缩，所以需要前端配合完成这一步）</span><br>
        <br>
        FAQ：跨域上传配置文件 <b>crossdomain.xml</b> 需要放在域名的根目录下 如:abc.com/crossdomain.xml<br>
    </p>
    <br><br>
    <a href="#" id="uploadBtn">点击我上传</a>
</div>
<script>
var uploader = H.plupload({
	url : 'http://admin.main.test.hotoem.com/Common/UploadImage?dir=image',
	browse_button : 'uploadBtn', //触发选择文件的 DOM 元素 ID
	autoUpload : true, //可选 默认为false
	file_data_name : 'file', //可选 默认为 当前值
	multi_selection : false, //可选 默认为 true
	multipart_params : function () { //可选
		return {
			username: 'abc'
		}
	},
	filters : { //可选 默认为当前配置
		max_file_size : '500kb',
		mime_types : [
			{
                title : 'Image files',
                extensions : 'jpg,gif,png'
            },{
                title : 'Zip files',
                extensions : 'zip'
            }
		],
		prevent_duplicates : false //default
	},
	init : {
		FileUploaded : function (up, files, response, json) {
			//上传成功后执行
			console.log(response);
			console.log(json);
		},
		PostInit : function (up, file) { //可选
			//初始化完成后执行
			alert('初始化');
		},
		BeforeUpload : function (up, file) { //可选
			//上传之前执行
			alert('上传之前');
		},
		FilesAdded : function (up, file) { //可选
			//添加文件执行
		},
		UploadProgress : function (up, file) { //可选
			console.log(file.percent);
		},
		Error : function (up, err) { //可选
			console.log(err);
			alert('error');
		}
	}
});
</script>
</body>
</html>
